<!-- components/mpopup-table.vue -->
<template>
	<view class="mpopup-body">
		<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
		<!-- 表头 -->
		<view class="mpopup-body-thead">
			<view class="mpopup-body-thead-name">核查内容</view>
			<view class="mpopup-body-thead-other">
				<view class="mpopup-body-thead-other-unit">核查和评价方法</view>
				<view class="mpopup-body-thead-other-notAudit">序号</view>
				<view class="mpopup-body-thead-other-timeOut">结果判断</view>
				<view class="mpopup-body-thead-other-accumulative">备注</view>
				<view class="mpopup-body-thead-other-file">附件</view>
			</view>
		</view>

		<!-- 表体 -->
		<view class="mpopup-body-tbody" v-if="groupedData.length > 0">
			<view 
				v-for="(group, groupIndex) in groupedData" 
				:key="groupIndex" 
				class="mpopup-body-group"
				:class="{'between-group': groupIndex > 0}">
				<view class="group-container">
					<view class="group-title">
						{{ group.title }}
					</view>
					<view class="group-content">
						<view 
							v-for="(item, itemIndex) in group.items" 
							:key="item.uniqueId" 
							class="mpopup-body-tbody-tr"
							:class="{'last-row': itemIndex === group.items.length-1}">
							<view class="mpopup-body-tbody-tr-name hidden"></view>
							<view class="mpopup-body-tbody-tr-other">
								<view class="mpopup-body-tbody-tr-other-box">
									<view class="mpopup-body-tbody-tr-other-box-unit multiline-text">
										{{ item.context }}
									</view>
									<view class="mpopup-body-tbody-tr-other-box-notAudit">
										{{ item.sort }}
									</view>
									<view class="mpopup-body-tbody-tr-other-box-timeOut">
										<uni-data-checkbox 
											selectedColor="blue" 
											selectedTextColor="blue" 
											mode="list"
											@change="$emit('check-change', item)" 
											v-model="item.result" 
											:localdata="checkOptions"
											:wrap="true" />
									</view>
									<view class="mpopup-body-tbody-tr-other-box-accumulative">
										<template v-if="item.remarks">
											<text @click="$emit('remark-click', item)">{{ item.remarks }}</text>
										</template>
										<template v-else>
											<text @click="$emit('remark-click', item)">点击添加备注</text>
										</template>
									</view>
									<view class="mpopup-body-tbody-tr-other-box-file">
										<template v-if="item.fileName">
											<text class="file-link" @click="previewFile(item.fileUrl)" @tap="onUpload(item)">
												{{ item.fileName }}
											</text>
										</template>
										<button v-else class="upload-btn" @tap="onUpload(item)">上传</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MpopupTable',
	data() {
		return {
			fileName: '',
			fileUrl: '',
			currentItem: null
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => []
		},
		uploadUrl: {
			type: String,
			default: "https://8954wg323mw0.vicp.fun/app/upload/uploadFile"
		},
		checkOptions: {
			type: Array,
			default: () => [
				{ text: '符合', value: 0 },
				{ text: '不符合', value: 1 },
				{ text: '合理缺陷', value: 2 }
			]
		}
	},
	computed: {
		groupedData() {
			const groups = [];
			let currentGroup = null;
			
			const sortedList = [...this.dataList].sort((a, b) => a.sort - b.sort);
			
			sortedList.forEach(item => {
				if (!currentGroup || currentGroup.title !== item.title) {
					currentGroup = {
						title: item.title,
						items: [item]
					};
					groups.push(currentGroup);
				} else {
					currentGroup.items.push(item);
				}
			});
			return groups;
		}
	},
	methods: {
		onUpload(item) {
			this.currentItem = item;
			this.$refs.lFile.upload({
				url: this.uploadUrl,
				name: 'file'
			});
		},
		onSuccess(res) {
			if (this.currentItem) {
				this.$set(this.currentItem, 'fileName', res.fileName);
				this.$set(this.currentItem, 'fileUrl', res.data.data);
			}
		},
		previewFile(url) {
			uni.downloadFile({
				url: url,
				success: (res) => {
					const filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true
					});
				}
			});
		}
	},
	emits: ['check-change', 'remark-click']
}
</script>

<style lang="less" scoped>
.mpopup-body {
	/* 表头样式 */
	&-thead {
		display: flex;
		background: #e9f1fe;
		border: 1px solid #757575;
		border-bottom: none;

		&-name {
			width: 15%;
			min-width: 15%;
			padding: 12px;
			border-right: 1px solid #757575;
			box-sizing: border-box;
			color: black;
			font-size: 20px;
		}

		&-other {
			width: 85%;
			display: flex;

			> view {
				padding: 12px;
				border-right: 1px solid #757575;
				box-sizing: border-box;
				text-align: center;
				color: black;
				font-size: 20px;

				&:last-child {
					border-right: none;
				}
			}

			&-unit { flex: 3; }
			&-notAudit { flex: 1; }
			&-timeOut { flex: 2; }
			&-accumulative { flex: 2; }
			&-file { flex: 1; }
		}
	}

	/* 分组样式 */
	&-group {
		position: relative;
		border-left: 1px solid #757575;
		border-right: 1px solid #757575;

		&.between-group {
			border-top: 1px solid #757575;
		}

		.group-container {
			display: flex;
			width: 100%;
		}

		.group-title {
			width: 15%;
			min-width: 15%;
			padding: 12px;
			border-right: 1px solid #757575;
			background: #f8f9fa;
			color: black;
			font-size: 20px;
			position: absolute;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			z-index: 1;
			border-bottom: 1px solid #757575;
		}

		.group-content {
			width: 85%;
			margin-left: 15%;
		}
	}

	/* 表体行样式 */
	&-tbody-tr {
		display: flex;
		border-bottom: 1px solid #757575;

		&.last-row {
			border-bottom: 1px solid #757575;
		}

		&-name.hidden {
			display: none;
		}

		&-other {
			width: 100%;
			
			&-box {
				width: 100%;
				display: flex;
				
				> view {
					padding: 12px;
					border-right: 1px solid #757575;
					min-height: 60px;
					display: flex;
					align-items: center;
					font-size: 17px;
					box-sizing: border-box;
					color: black;

					&:last-child {
						border-right: none;
					}
				}

				&-unit { 
					flex: 3;
					white-space: pre-wrap;
					word-break: break-word;
					line-height: 1.5;
				}
				&-notAudit { flex: 1; }
				&-timeOut { flex: 2; }
				&-accumulative { flex: 2; }
				&-file { 
					flex: 1;
					word-break: break-word;
					overflow-wrap: break-word;
				}
			}
		}
	}

	/* 通用样式 */
	.file-link {
		color: #007AFF;
		text-decoration: underline;
	}

	.upload-btn {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		background-color: transparent;
	}
}

@media (max-width: 768px) {
	.mpopup-body {
		overflow-x: auto;
		
		&-thead,
		&-tbody {
			min-width: 800px;
		}
	}
}
</style>